<!--
 * @Author: Betty
 * @Date: 2020-11-05 14:13:16
 * @LastEditors: Betty
 * @LastEditTime: 2021-03-02 22:46:56
 * @Description: 这个是专栏列表组件，展示专栏列表数据
-->
<template>
  <div class="row">
    <!-- 里面的每一个专栏 -->
    <div v-for="column in columnList" :key="column._id" class="col-4 mb-4">
      <div class="card h-100 shadow-sm text-center">
        <div class="card-body">
          <!-- img的src改为column的avatar的url属性，注意avatar可能没有url属性 -->
          <img :src="column.avatar && column.avatar.fitUrl" :alt="column.title" class="rounded-circle border my-3">
          <h5 class="card-title">{{column.title}}</h5>
          <p class="card-text text-left">{{column.description}}</p>
          <!-- <router-link :to="{ name: 'column', params: {id: column.id}}" class="btn btn-outline-primary">进入专栏</router-link> -->
          <router-link :to="`/column/${column._id}`" class="btn btn-outline-primary">进入专栏</router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
import { ColumnProps } from '../store'
// eslint-disable-next-line no-unused-vars
import { addColumnAvatar } from '../helper'
// 定义专栏类型，里面有id，作者头像，标题，描述这几个属性（定义到其他文件了）

export default defineComponent({
  name: 'ColumnList',
  props: {
    // 这个组件需要传入专栏数据，这是一个数组，而且必填
    // 我们想把它断言成自定义类型数组，就要使用Proptype，传入我们需要的类型作为泛型
    list: {
      type: Array as PropType<ColumnProps[]>,
      required: true
    }
  },
  setup(props) {
    console.log(props.list)
    // 我们对专栏数据做一些处理（如默认图的补充），把处理后的数据通过计算顺序返回出去
    // 我们需要数组，所以要返回的也是数组，返回新数组，数组里的东西都被处理了，应该用map方法
    const columnList = computed(() => {
      return props.list.map(column => {
        // 对头图的处理不应该由我们写在这里，应该封装成通用的方法，写到helper里去
        // 现在我们导入并使用helper里的处理头图的方法，传入专栏数据和目标大小
        addColumnAvatar(column, 50,50)
        return column
      })
    })
    return {
      // 我们在组件里使用的列表是计算属性
      columnList
    }
  }
})
</script>

<style scoped>
  /* 不让头图大小做成百分比了，改为固定的大小 */
  .card-body img {
    width: 50px;
    height: 50px;
  }
</style>

